
<template>
  <div class="user">
    <van-nav-bar title="行程统计" left-arrow @click-left="onClickLeft" />
    <div class="record">
      <div class="list" v-for="(v,i) in trip_list" :key="i">
        <p class="title">{{ v.title }}</p>
        <p class="content">{{ v.content }}</p>
      </div>
    </div>
    
      <div class="chart" v-for="(item,index) in chart_list" :key="index">
        <div class="itemTitle">
          <h4>{{ item.title }}</h4><p>查看全部<van-icon name="arrow" /></p>
        </div>
        <div class="itemBox1" v-if="item.id == 1">
          <div class="itemContent1" v-for="(v,i) in item.details" :key="i">
            <p>{{ v.name }}</p>
            <p>{{ v.times }}</p>
            <el-progress type="circle" :percentage="v.percentage" :color="v.color" width="90"></el-progress>
          </div>
        </div>
        <div class="itemBox" v-if="item.id != 1">
          <div class="itemContent" v-for="(v,i) in item.details" :key="i">
            <p>{{ v.name }}</p>
            <van-progress :percentage="v.percentage" :color="v.color"/>
            <p>{{ v.times }}</p>
          </div>
        </div>
      </div>
    
  </div>
</template>

<script>
export default {
  name: 'set',
  data(){
    return{
      trip_list:[
        {id:1,path:'/index',title:'飞行里程',content:'8427公里'},
        {id:2,path:'/index',title:'飞行时长',content:'16小时30分钟'},
        {id:3,path:'/index',title:'飞行次数',content:'5次'},
        {id:4,path:'/index',title:'城市',content:'4个'},
        {id:5,path:'/index',title:'国家/地区',content:'1个'},
        {id:6,path:'/index',title:'航空公司',content:'4个'}
      ],
      chart_list:[
        {id:1,path:'/index',title:'乘坐机型',details:[{id:11,path:'/index',name:'空客 320',times:'2次',percentage:'66',color:'#f8aba6'},{id:12,path:'/index',name:'波音 737',times:'2次',percentage:'66',color:'#f8aba6'},{id:13,path:'/index',name:'空客 321',times:'1次',percentage:'33',color:'#f8aba6'},]},
        {id:2,path:'/index',title:'搭乘的航空公司',details:[{id:21,path:'/index',name:'四川航空',times:'2次',percentage:'90',color:'#fab27b'},{id:22,path:'/index',name:'西藏航空',times:'1次',percentage:'40',color:'#fab27b'},{id:23,path:'/index',name:'海南航空',times:'1次',percentage:'40',color:'#fab27b'},{id:24,path:'/index',name:'厦门航空',times:'1次',percentage:'40',color:'#fab27b'},]},
        {id:3,path:'/index',title:'去过的机场',details:[{id:31,path:'/index',name:'杭州萧山',times:'5次',percentage:'90',color:'#9b95c9'},{id:32,path:'/index',name:'兰州中川',times:'2次',percentage:'40',color:'#9b95c9'},{id:33,path:'/index',name:'西安咸阳',times:'2次',percentage:'40',color:'#9b95c9'},{id:34,path:'/index',name:'嘉峪关',times:'1次',percentage:'20',color:'#9b95c9'},]},
      ]
    }
  },
  created(){

  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    }
  }
} 
</script>

<style scoped>
.user{
    width: 350px;
    margin: 5px;
}
.record{
  width: 330px;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.list{
  width: 90px;
  height: 45px;
  padding: 0 10px;
  line-height: 20px;
}
.list p{
  margin: 0;
  font-size: 10px;
}
.title{
  color: #a4a4a4;
}
.content{
  color: #000;
}
.itemTitle,.itemContent{
  display: flex;
  justify-content: space-between;
}
.itemTitle p,.itemTitle h4{
  margin:0 5px;
}
.itemTitle p{
  font-size: 12px;
  color: #b4b4b4;
  line-height: 40px;
}
.itemBox1{
  display: flex;
  justify-content: space-around;
}
.itemBox{
  width: 310px;
  height: 160px;
  padding:0 10px;
}
.itemContent1{
  text-align: center;
}
.itemContent1 p{
  margin: 0;
  font-size: 12px;
}
.itemContent p{
  line-height: 40px;
  margin: 0;
  font-size: 12px;
}
.chart{
  width: 330px;
  /* height: 40px; */
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px;
  
}
.van-progress{
  width: 150px;
  /* height: 40px; */
  margin-top: 15px;
}
</style>
